<template>
  <div class="vc-page vc-page-parts">
    <!-- 左侧 - 字典树 -->
    <el-tree-sider
      tree-title="字典树"
      node-icon="vc-icon vc-icon-tree-dic"
      :data="orgTreeData"
      :default-checked-node="defaultChecked"
      :handle-menu="true"
      :menu-events="menuEvents"
      :addable="true"
      @refresh="getAllDictionary"
      @node-click="handleNodeClick"
      @add="addDialogVisible = true"/>

    <!-- 右侧 - 字典项列表 -->
    <div class="part-right">
      <!-- 查询条件 -->
      <query-terms ref="queryTerms" :searchConfig="searchConfig"/>

      <!-- 操作按钮 -->
      <div class="vc-btns">
        <el-button type="primary" size="small" @click="addItemDialogVisible = true">新增</el-button>
        <el-button size="small" :disabled="selectedIds.length === 0" @click="batchDel">删除</el-button>
      </div>

      <!-- 列表展示 -->
      <div class="vc-table">
        <tables
          v-model="tableConfig.tableData"
          :columns="tableConfig.columns"
          :stripe="true"
          @on-selection-change="handleSelectionChange"/>

        <el-pagination
          :current-page.sync="currentPage"
          @current-change="handleCurrentChange"
          :page-size="GLOBAL.QUERY.PAGE_SIZE"
          :total="total"
          layout="total, prev, pager, next">
        </el-pagination>
      </div>
    </div>
    
    <!-- 新增字典 -->
    <add-dic :dialogVisible="addDialogVisible" @close="closeAddDialog"></add-dic>

    <!-- 修改字典 -->
    <edit-dic :entity="entity" :dialogVisible="editDialogVisible" @close="closeEditDialog"></edit-dic>

    <!-- 新增字典项 -->
    <add-item :dicId="id" :dicName="name" :dialogVisible="addItemDialogVisible" @close="closeAddItemDialog"></add-item>

    <!-- 修改字典项 -->
    <edit-item :entity="entity" :dicName="name" :dialogVisible="editItemDialogVisible" @close="closeEditItemDialog"></edit-item>

  </div>
</template>

<script>
 import AddDic from './addDic';
 import EditDic from './editDic';
 import AddItem from './addItem';
 import EditItem from './editItem';

export default {
  name: 'dictionary',
  components: { AddDic, EditDic, AddItem, EditItem },
  data() {
    return {
      // 字典树
      orgTreeData: null,
      defaultChecked: {},
      menuEvents: [
        {
          name: '新增字典',
          event: data => {
            this.addDialogVisible = true;
          }
        },
        {
          name: '修改字典',
          event: data => {
            this.editDic(data);
          }
        },
        {
          name: '删除字典',
          event: data => {
            this.currHandleData = data;
            this.delBtnDic();
          }
        }
      ],
      addDialogVisible: false,
      editDialogVisible: false,
      currHandleData: {},
      // 查询条件
      searchConfig: {
        items: [
          {
            key: 'name',
            title: '字典项名称'
          },
          {
            key: 'code',
            title: '字典项编码'
          }
        ],
        search: params => {
          this.search(params);
        },
        reset: () => {
          this.reset();
        },
        params: {}
      },
      id: '',
      name: '',
      searchData: {
        name: '',
        code: ''
      },
      // 列表
      tableConfig: {
        columns: [
          {
            type: 'selection'
          },
          {
            type: 'index'
          },
          {
            title: '字典项名称',
            key: 'name'
          },
          {
            title: '字典项编码',
            key: 'code'
          },
          {
            title: '显示排序',
            key: 'showOrder'
          },
          {
            type: 'option',
            minWidth: '48',
            items: [
              {
                title: '修改',
                class: 'edit',
                click: row => {
                  this.handleEdit(row)
                }
              }
            ]
          }
        ],
        tableData: []
      },
      currentPage: 1,
      total: 0,
      selectedIds: [],
      entity: {},
      addItemDialogVisible: false,
      editItemDialogVisible: false
    }
  },
  mounted() {
    this.getAllDictionary();
  },
  methods: {
    /**
     * 获取字典树数据
     */
    getAllDictionary() {
      this.$api.getAllDictionary().then(res => {
        if (!res.success || !res.data || !res.data.length) {
          this.orgTreeData = [];
          this.treeEmptyText = this.GLOBAL.QUERY.EMPTY_TEXT;
          this.emptyTableData();
          return;
        }
        this.orgTreeData = this.GLOBAL.array.transToTreeData(res.data);
        this.defaultChecked = this.orgTreeData[0];
      });
    },
    /**
     * 树节点被点击时的回调
     */
    handleNodeClick(data, node) {
      this.id = data.id;
      this.name = data.name;
      !node ? this.getDicData(data.id) : this.$refs.queryTerms.reset();
    },
    /**
     * 获取右侧字典项列表数据
     */
    getDicData(id, pageNum = this.currentPage, pageSize = this.GLOBAL.QUERY.PAGE_SIZE, entity = this.searchData) {
      this.$api.getDicData({
        data: {
          pageNum: pageNum,
          pageSize: pageSize,
          params: Object.assign(entity, { dicId: id })
        }
      }).then(res => {
        if (!res.success || !res.data.total) {
          this.emptyTableData();
          return;
        }
        if (!res.data.records || !res.data.records.length) {
          this.currentPage--;
          this.getDicData(id);
          return;
        }
        this.tableConfig.tableData = res.data.records;
        this.total = res.data.total;
        this.currentPage = res.data.current;
      }).catch(() => {
        this.emptyTableData();
      });
    },
    /**
     * 清空表格数据
     */
    emptyTableData() {
      this.tableConfig.tableData = [];
      this.total = 0;
      this.currentPage = 1;
    },
    /**
     * 点击页数
     */
    handleCurrentChange(val) {
      this.getDicData(this.id, val);
    },
    /**
     * 查询
     */
    search(params) {
      this.searchData = this.GLOBAL.filter.filterSpace(params);
      this.currentPage = 1;
      this.getDicData(this.id);
    },
    /**
     * 重置
     */
    reset() {
      this.search(this.GLOBAL.object.clearValOfObj(this.searchData));
    },
    /**
     * '新增'弹出框关闭事件
     */
    closeAddDialog(val) {
      this.addDialogVisible = false;
      if (!val) return;
      this.getAllDictionary();
      this.$store.dispatch('getAllDic');
    },
    /**
     * 删除字典点击事件
     */
    delBtnDic() {
      this.$confirmBox(this.delDic);
    },
    /**
     * 删除字典
     */
    delDic() {
      this.$api.deleteDicById({
        data: {
          id: this.currHandleData.id
        }
      }).then(res => {
        this.getAllDictionary();
        this.$store.dispatch('getAllDic');
        res.success && this.$notifyBox('删除成功', 'success');
      });
    },
    /**
     * 修改字典
     */
    editDic(data) {
      this.entity = Object.assign({}, data);
      this.editDialogVisible = true;
    },
    /**
     * '修改'弹出框关闭事件
     */
    closeEditDialog(val) {
      this.editDialogVisible = false;
      if (!val) return;
      this.getAllDictionary();
      this.$store.dispatch('getAllDic');
    },
    /**
     * '新增字典项'弹出框关闭事件
     */
    closeAddItemDialog(val) {
      this.addItemDialogVisible = false;
      if (!val) return;
      this.$refs.queryTerms.reset();
      this.$store.dispatch('getAllDic');
    },
    /**
     * 复选框勾选
     */
    handleSelectionChange(val) {
      this.selectedIds = this.GLOBAL.array.selectOneKey(val, 'id');
    },
    /**
     * '删除'按钮点击事件
     */
    batchDel() {
      this.$confirmBox(this.handleDel);
    },
    /**
     * 删除字典项
     */
    handleDel() {
      this.$api.deleteDicItemByIds({
        data: this.selectedIds
      }).then(res => {
        this.getDicData(this.id);
        this.$store.dispatch('getAllDic');
        res.success && this.$notifyBox('删除成功', 'success');
      });
    },
    /**
     * 操作列-修改
     */
    handleEdit(row) {
      this.entity = Object.assign({}, row);
      this.editItemDialogVisible = true;
    },
    /**
     * '修改字典项'弹出框关闭事件
     */
    closeEditItemDialog(val) {
      this.editItemDialogVisible = false;
      if (!val) return;
      this.getDicData(this.id);
      this.$store.dispatch('getAllDic');
    }
  }
}
</script>